<template>
  <view class="wrapper">
    <view class="service">
      <u-icon name="kefu-ermai" size="30" color="#434343"></u-icon>
      <view class="title">联系客服</view>
    </view>
    <navigator open-type="switchTab" url="/pages/cart/cart" class="cart">
      <u-badge
        class="car-num"
        :count="goodsCount"
        type="error"
        :offset="[-15, -5]"
      ></u-badge>
      <u-icon name="shopping-cart" :size="30" color="#434343"></u-icon>
      <view class="title">购物车</view>
    </navigator>
    <view class="addCart btn" @click="$emit('addCart')"> 加入购物车 </view>
    <view class="buyNow btn"> 立即购买 </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters('cart', ['goodsCount']),
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 18rpx 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .service {
    text-align: center;
    font-size: 20rpx;
    .title {
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .cart {
    position: relative;
    text-align: center;
    font-size: 20rpx;
    .title {
      margin-top: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .addCart {
    background: #fcaa23;
  }
  .buyNow {
    background: #ea4350;
  }
  .btn {
    font-size: 26rpx;
    line-height: 60rpx;
    padding: 0 32rpx;
    border-radius: 30rpx;
    color: #fff;
    font-weight: bold;
  }
}
</style>
